<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修复验证测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
        }
        .test-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .success { color: green; }
        .error { color: red; }
        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        button {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            background-color: #007bff;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 4px;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <h1>🔧 修复验证测试</h1>
    
    <div class="test-section">
        <h3>测试用户名提取函数</h3>
        <p>这个函数现在应该能够处理各种输入格式，包括非字符串输入：</p>
        
        <input type="text" id="testInput" placeholder="输入测试内容，例如：我是小明" />
        <button onclick="testExtractUsername()">测试提取</button>
        
        <div id="extractResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>测试数据结构兼容性</h3>
        <p>测试新旧数据格式的兼容性：</p>
        
        <button onclick="testOldFormat()">测试旧格式（字符串）</button>
        <button onclick="testNewFormat()">测试新格式（对象）</button>
        <button onclick="testInvalidFormat()">测试无效格式</button>
        
        <div id="formatResult" class="result"></div>
    </div>

    <script>
        // 模拟修复后的extractUsernameFromQuery函数
        function extractUsernameFromQuery(query) {
            // 确保输入是字符串
            if (typeof query !== 'string') {
                console.log(`输入类型不是字符串: ${typeof query}`, query)
                return ''
            }
            
            // 支持多种用户名提取格式
            const patterns = [
                /为([\u4e00-\u9fa5a-zA-Z0-9_]+)推荐/,  // 为[用户名]推荐
                /为([\u4e00-\u9fa5a-zA-Z0-9_]+)：/,    // 为[用户名]：
                /给([\u4e00-\u9fa5a-zA-Z0-9_]+)推荐/,  // 给[用户名]推荐
                /帮([\u4e00-\u9fa5a-zA-Z0-9_]+)搭配/,  // 帮[用户名]搭配
                /([\u4e00-\u9fa5a-zA-Z0-9_]+)需要/,    // [用户名]需要
                /([\u4e00-\u9fa5a-zA-Z0-9_]+)想要/,    // [用户名]想要
                /我是([\u4e00-\u9fa5a-zA-Z0-9_]+)/,    // 我是[用户名]
                /我叫([\u4e00-\u9fa5a-zA-Z0-9_]+)/,    // 我叫[用户名]
                /我的名字是([\u4e00-\u9fa5a-zA-Z0-9_]+)/ // 我的名字是[用户名]
            ]
            
            for (const pattern of patterns) {
                const match = query.match(pattern)
                if (match) {
                    return match[1]
                }
            }
            
            return ''
        }
        
        // 测试用户名提取
        function testExtractUsername() {
            const input = document.getElementById('testInput').value.trim()
            const resultDiv = document.getElementById('extractResult')
            
            if (!input) {
                resultDiv.innerHTML = '❌ 请输入测试内容'
                resultDiv.className = 'result error'
                return
            }
            
            try {
                const username = extractUsernameFromQuery(input)
                if (username) {
                    resultDiv.innerHTML = `✅ 提取成功！\n用户名: ${username}\n输入内容: ${input}`
                    resultDiv.className = 'result success'
                } else {
                    resultDiv.innerHTML = `ℹ️ 未提取到用户名\n输入内容: ${input}\n\n支持格式：\n- 我是小明\n- 为小明推荐职场穿搭\n- 给小红搭配约会服装\n- 小明需要职场穿搭`
                    resultDiv.className = 'result'
                }
            } catch (error) {
                resultDiv.innerHTML = `❌ 提取失败，发生错误：\n${error.message}\n\n输入内容: ${input}`
                resultDiv.className = 'result error'
            }
        }
        
        // 测试旧格式（字符串）
        function testOldFormat() {
            const resultDiv = document.getElementById('formatResult')
            try {
                const testData = "为小明推荐职场穿搭"
                const username = extractUsernameFromQuery(testData)
                resultDiv.innerHTML = `✅ 旧格式测试成功\n输入: "${testData}"\n提取用户名: ${username}`
                resultDiv.className = 'result success'
            } catch (error) {
                resultDiv.innerHTML = `❌ 旧格式测试失败：${error.message}`
                resultDiv.className = 'result error'
            }
        }
        
        // 测试新格式（对象）
        function testNewFormat() {
            const resultDiv = document.getElementById('formatResult')
            try {
                const testData = { query: "为小红推荐约会穿搭", username: "小红" }
                // 模拟事件处理逻辑
                let username = ''
                if (typeof testData === 'string') {
                    username = extractUsernameFromQuery(testData)
                } else if (testData && testData.username) {
                    username = testData.username
                }
                
                resultDiv.innerHTML = `✅ 新格式测试成功\n输入对象: ${JSON.stringify(testData)}\n提取用户名: ${username}`
                resultDiv.className = 'result success'
            } catch (error) {
                resultDiv.innerHTML = `❌ 新格式测试失败：${error.message}`
                resultDiv.className = 'result error'
            }
        }
        
        // 测试无效格式
        function testInvalidFormat() {
            const resultDiv = document.getElementById('formatResult')
            try {
                const testCases = [
                    null,
                    undefined,
                    123,
                    {},
                    [],
                    true
                ]
                
                let results = []
                testCases.forEach((testCase, index) => {
                    const username = extractUsernameFromQuery(testCase)
                    const status = username === '' ? '✅' : '❌'
                    results.push(`${index + 1}. ${status} 类型: ${typeof testCase}, 值: ${testCase}, 结果: ${username || '空字符串'}`)
                })
                
                resultDiv.innerHTML = `✅ 无效格式测试成功\n\n测试结果：\n${results.join('\n')}`
                resultDiv.className = 'result success'
            } catch (error) {
                resultDiv.innerHTML = `❌ 无效格式测试失败：${error.message}`
                resultDiv.className = 'result error'
            }
        }
        
        // 回车键触发测试
        document.getElementById('testInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                testExtractUsername()
            }
        })
    </script>
</body>
</html>
